<template>
    <div class="upload-file-con">
        <Upload
            ref="upload"
            :show-upload-list="false"
            :default-file-list="defaultList"
            :on-success="handleSuccess"
            :max-size="2048"
            :on-exceeded-size="handleMaxSize"
            :before-upload="handleBeforeUpload"
            :on-error="handleError"
            multiple
            type="drag"
            :action="baseUrl+'/uploadFile'"
            style="display: inline-block;width:300px;">
             <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>点击此处或将文件拖拽到此处上传</p>
            </div>
            <Spin fix v-if="showProgress">
                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                <div>上传中...</div>
            </Spin>
        </Upload>
        <div class="demo-upload-list-file" v-for="(item, index) in uploadList" :key="index">
            <template v-if="item.status === 'finished'">
                <p class="list-item">
                    <Icon type="ios-document"></Icon>
                    <span>{{item.name}}</span>
                    <Icon @click.native="onRemove(item)" class="delete" type="md-close"></Icon>
                </p>
            </template>
        </div>
    </div>
</template>
<script>
    import baseUrl from '_conf/url';
    export default {
        data () {
            return {
                defaultList: [],
                imgName: '',
                visible: false,
                uploadList: [],
                baseUrl,
                percentage:0,
                timer: null,
                showProgress: false
            }
        },
        methods: {
            handleView (name) {
                this.imgName = name;
                this.visible = true;
            },
            handleError(){
                this.$Message.error('文件上传失败！')
                this.showProgress = false;
            },
            onRemove (file) {
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            },
            handleSuccess (res, file) {
                file.url = baseUrl+res.data.path;
                this.showProgress = false;
                file.name = file.name;
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '超过文件大小限制',
                    desc: '文件  ' + file.name + ' 太大了，不能超过2Mb。'
                });
                this.showProgress = false;
            },
            handleBeforeUpload () {
                const check = this.uploadList.length < 5;
                if (!check) {
                    this.$Notice.warning({
                        title: 'Up to five pictures can be uploaded.'
                    });
                }
                this.showProgress = true;
                return check;
            }
        },
        mounted () {
            this.uploadList = this.$refs.upload.fileList;
        }
    }
</script>
<style>
    .demo-upload-list-file{
        padding: 5px;
        display: inline-block;
        width: 100%;
    }

    .list-item {
        font-size: 14px;
        cursor: pointer;
        height: 25px;
        line-height: 25px;
        /* border: 1px solid #ccc; */
        padding-left: 5px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .list-item span {
        display: inline-block;
        width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .list-item:hover {
        border: 1px solid blueviolet;
    }

    .list-item:hover span {
        color: blueviolet;
    }
    .list-item:hover .delete{
        display: inline-block;
    }

    .list-item i {
        margin-right: 5px;
    }

    .delete {
        float: right;
        color: rgb(196, 36, 36);
        line-height: 25px;
        display: none;
    }
    .upload-file-con{
        width: 300px;

    }
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
</style>
